<template>
  <div>
    <div class="tools">
      <el-button type="primary" @click="handleAdd"> 添加用户 </el-button>
      <el-button type="success" @click="handleCreate"> 新增用户 </el-button>
    </div>
    <AppTable :data="users" :columns="columns" border />
    <Pagination
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="paginationData.pageSize"
      :total="paginationData.total"
      :load-list="getTableData"
    />
    <UnAddUser
      :ou-id="props.ou.id"
      v-model:visible="visible"
      @success="handleSuccess"
    />
    <UserForm
      v-model:visible="createUserVisible"
      :title="`新增用户 -- ${props.ou.displayName}`"
      @success="handleCreateSuccess"
    />
  </div>
</template>

<script setup lang="tsx">
import { ElMessage, ElMessageBox } from 'element-plus'
import { PropType, reactive, ref, watch } from 'vue'

import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import AppTable from '@/components/AppTable/index.vue'
import Pagination from '@/components/Pagination/index.vue'
import {
  addUserToDepartment,
  getAddedUsers,
  removeUserFromDepartment,
} from '@/http/department'
import type { IDepartment, IDepartmentUser } from '@/http/types/department'

import UserForm from '../user/UserForm.vue'
import UnAddUser from './unAddUser.vue'

const buttonConfig: IButtonConfig[] = [
  {
    name: '移除',
    eventName: 'handleRemove',
    type: 'primary',
  },
]
const columns = ref([
  { label: '登录名', prop: 'userName' },
  { label: '姓名', prop: 'name' },
  { label: '邮箱地址', prop: 'email' },
  { label: '手机号', prop: 'phoneNumber' },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }: { row: IDepartmentUser }) => {
      return (
        <AppButtonGroup
          rowData={row}
          buttonConfigs={buttonConfig}
          onEvent={(eventName: string) => {
            eventName === 'handleRemove' && handleRemove(row)
          }}
        ></AppButtonGroup>
      )
    },
  },
])

const props = defineProps({
  ou: {
    type: Object as PropType<IDepartment>,
    required: true,
  },
})

const visible = ref(false)
const createUserVisible = ref(false)
const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0,
})

const users = ref<IDepartmentUser[]>([])
watch(
  () => props.ou.id,
  () => {
    getTableData()
  },
)

const getTableData = async () => {
  if (!props.ou.id) return ElMessage.error('请选择部门')
  const res = await getAddedUsers(
    paginationData.currentPage,
    paginationData.pageSize,
    props.ou.id,
  )
  users.value = res.items
  paginationData.total = res.totalCount
}
const handleRemove = (row: IDepartmentUser) => {
  ElMessageBox.confirm('从部门移除该用户, 是否继续?', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    await removeUserFromDepartment(row.id, props.ou.id)
    getTableData()
  })
}
const handleAdd = () => {
  if (!props.ou.id) return ElMessage.error('请选择部门')
  visible.value = true
}

const handleSuccess = () => {
  visible.value = false
  getTableData()
}

const handleCreate = () => {
  createUserVisible.value = true
}
const handleCreateSuccess = async (id: string) => {
  createUserVisible.value = false
  await addUserToDepartment(id, props.ou.id)
  getTableData()
}
</script>

<style scoped lang="scss">
.tools {
  margin-bottom: 20px;
}
</style>
